<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/chosen/chosen.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
    <link href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/zTree/zTreeStyle/metro.css" rel="stylesheet">
    <style type="text/css">
    .ztree li a.curSelectedNode{
		background-color:#BEEBFF;
		}
		.radio-primary input[type="radio"] + label::after {background-color: #1ab394;}
		.radio-primary input[type="radio"]:checked + label::after {background-color: #1ab394;}
		.radio-primary input[type="radio"]:checked + label::before {border-color: #1ab394;}
		.rdo{
		    width: 20px;
		    height: 0px;
		    background-color: #000;
		    margin-right: 30px;
		    border-radius: 50%;
		    position: relative;
		}
		.ztree li span.button.noline_close{background-position: -126px -84px;}									
	    .ztree li span.button.noline_open{background-position: -105px -84px;}
	    

		.checkbox_select input[type="checkbox"] + label::before{
		  content:"\00a0";//Unicode字符集，生成“空格”
		  display:inline-block;
		  width:12px;
		  height:12px;
		  line-height:12px;
		  border-radius:3px;
		  margin:3px;
		  background-color:yellowgreen;
}}
	</style>
</head>
<body class="gray-bg">

	
<div class="wrapper wrapper-content">

	<!--  导航按钮-->
	<div class="couton" style="padding: 10px,0,10px,0">
		<button type="button" class="btn btn-default btn-lg" style="background-color: #F5F5F5;color: black;border:none;" onclick="messagestaff('1')">短信验证员工</button>
		<button type="button" class="btn btn-info btn-lg" style="background-color: white;color: black;border:none;" onclick="messagestaff('2')">已删除员工</button>      
	</div>
	<!-- 条件查询 -->
    <div class="row searchCondition" style="background-color: white;padding: 10px;">
        <div class="row">
            <div class="col-sm-2">
				姓名
                <input id="name" placeholder="请输入姓名" class="form-control chosen-select" style="width: 150px;display: inline-block;" autocomplete="off">
            </div>
            
            <div class="col-sm-2">
              	手机
              	<input id="phone" type="text" class="form-control" maxlength="11" placeholder="请输入会员手机号"  onkeyup="value=value.replace(/[^\d]/g,'')" style="width: 150px;display: inline-block;">
            </div>
            
            <div class="col-sm-6  jfoucs" style="max-width:340px;">
		           		<label class="col-sm-2" style="margin-top:10px; min-width:100px;">累计积分</label>
		           		<a class="cfoucs" point="0"><div class="radio radio-primary col-sm-2" style="min-width:80px;">
					                <input id="no_limit" type="radio" checked="checked" name="limit_activity" >
					                <label for="no_limit" style="min-width:60px;">不限</label>
			           	</div></a>
			           	<a  class="cfoucs" point="">
	           				<div class="radio radio-primary col-sm-2" style="margin-top:10px;min-width:60px;">
				                <input id="limit" type="radio"  name="limit_activity" >
				                <label for="limit" style="min-width:100px;">自定义</label>
	           				</div>
			           	</a>
		   </div>
		    <div class="col-sm-3">
           		<span id="custPoint" style="display: none;">
			            <input id="point1" type="text" onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")' onblur='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' class="form-control" maxlength="10" style="width: 100px;display: inline-block;">
			            	至
			            <input id="point2" type="text" onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")' onblur='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")' class="form-control" maxlength="10" style="width: 100px;display: inline-block;">
          					</span>
			  </div>
		    
            <div class="col-sm-1" style="float:right" >
            	<button onclick="func_dataTableReload()" class="btn btn-primary" type="button">查询</button>
            </div>
        </div>
        
        <div class="row" style="line-height: 40px;padding: 10px;">
	        <div class="form-group">
                    <label class="col-sm-1 control-label"><span class="red" style="margin-right:2px">*</span>所属部门</label>
                    <div class="col-sm-3">
                        <button class="btn btn-primary btn-outline" type="button" data-toggle="modal" href="#" data-target="#myModa4" >选择部门</button>
                    </div>
             </div>
    	</div>
	</div>
	
	<!--部门树  -->
 <div hidden="" class="modal inmodal fade" id="myModa4" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="z-index: 1040;" >
            <div class="modal-content"  style="width:400px;">
                <div class="modal-header" style="padding: 15px 15px 10px;">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="text-left">用户部门配置</h4>
                </div>
                <div class="text-center" style="width:100%;height:60px;">     
                <!-- CRM角色 -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">请选择部门</label>
                    <div style="overflow-x:auto;height:250px;" class="col-sm-9">
                      <!-- 引入zTree -->		
                      <ul id="tree" class="ztree" ></ul>  
                      <input id="belognDepartmentId" style="display:none;"></input>
                    </div>
                </div>

                </div>
                 <div class="modal-footer" style="text-align:center;border-top:none;">
                     <button type="button" class="btn btn-outline btn-primary" onclick="cancel();">取消</button>
                     <button type="button" class="btn btn-primary k_verify" onclick="addDempentlike()">确定</button>
                 </div>
             </div>
        </div>
    </div> 
    <!--列表头  -->
    <div class="wt100" style="position:relative; overflow:hidden; height:100%">
	        <table id="myTable" class="display" cellspacing="0" width="100%">
	            <thead>
	            <tr>
	            	<th style="width:30px; padding:10px 0 10px 10px">
                	<input type="checkbox" id="checkall"></th>
	                <th>基本资料</th>
	                <th>累计积分</th>
	                <th>剩余积分</th>
	                <th>邀请粉丝</th>
	                <th>邀请会员</th>
	                <th>参与活动</th>
	                <th>注册时间</th>
	            </tr>
	            </thead>
	            <tbody>   
	            </tbody>
	        </table>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
<script src="<%=path%>/hplus/js/plugins/zTree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/dateUtils.js"></script>
<script type="text/javascript">
$.fn.dataTable.ext.errMode = 'none';
    var path = "<%=path%>";
    var myDataTable;
    var saveMemberDialog = null;
    var importMemberDialog = null;
    var memberDetailDialog = null;
    var paramJsonObj={};
    var exportStatus = 0;	//会员导出状态
    var departmentCode = "";	//会员导出循环器

    $(function () {
    	
    	initZtree();
        $("#data_5 .input-daterange").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
        $(".jfoucs a").click(function(){
    		$(this).addClass("cfoucs").siblings().removeClass("cfoucs");
    		
    		if($(this).attr("last_time") != undefined){
    			if($(this).attr("last_time") == ""){
        			$("#data_5").show();
        		}else{
        			$("#data_5").hide();
        		}
    		}else if($(this).attr("point") != undefined){
    			if($(this).attr("point") == ""){
        			$("#custPoint").show();
        		}else{
        			$("#custPoint").hide();
        		}
		    }
    		
    	}); 
        
        init();
        
    });
  //设置某节点的选中状态
    function setTreeNoteSelect(treeName,id){
     	//根据id获取树的某个节点：
     	var zTree = $.fn.zTree.getZTreeObj(treeName);
     	var node = zTree.getNodeByParam("id",id);
     	//设置node节点选中状态：
     	zTree.selectNode(node);
    }
    
  //初始化部门基础树
	function initZtree(){
    	//保存所有的部门节点数据
    	var zNodes =[];
		//发送ajax请求，从DB中查询该企业下，包含层级关系的全部部门
      	var url="<%=path%>/department/ajaxSelectAllDepartment";
    	$.post(url, {
		}, function(data) {
			var realData = data.data;
			if (data.status == 200) {
				for(var i=0;i<realData.length;i++){
					var treeData = null;
					//机构团队用不同的图标
					if(realData[i].companyType == 1){
					   treeData = {id:realData[i].id,companyType:realData[i].companyType,leaderName:realData[i].leaderName,pId:realData[i].parentDeptId, name:realData[i].name,title:realData[i].title,open:true,icon:"${pageContext.request.contextPath}/images/system/mechanismIcon.png"};
					}else{
					   treeData = {id:realData[i].id,companyType:realData[i].companyType,leaderName:realData[i].leaderName,pId:realData[i].parentDeptId, name:realData[i].name,title:realData[i].title,open:true,icon:"${pageContext.request.contextPath}/images/system/teamIcon.png"};
					}
					zNodes.push(treeData);
				}
				zTree(zNodes);
				ztreeData(zNodes);
			}else{		
        		errorDialog(data.message);
        	}
		}); 
	}
  
	 /*
    chkboxType: { “Y”: “ps”, “N”: “ps” } 
	   Y 属性定义 checkbox 被勾选后的情况； 
	   N 属性定义 checkbox 取消勾选后的情况； 
	   “p” 表示操作会影响父级节点； 
	   “s” 表示操作会影响子级节点。 
	   */
    //控件初始化部门基础树
    function zTree(treeData){
        var zTree;
        //用于保存用户选中的节点
        var curNode;
        //树属性的定义  
        var setting = {  
            check: { 
         	   enable: true,				
         	   chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
         	   chkboxType: { "Y": "", "N": "" }   //勾选 checkbox 对于父子节点的关联关系
            },	
            //页面上的显示效果  
            view: {
                showLine: false,					
                selectedMulti: false
            }, 
            data: {
                simpleData: {
                    enable:true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                },  
	               key: {  
	                   title: "title"  
	               } 
            },
            callback: {
                beforeClick: getCurrentNode,
                onClick : zTreeOnClick
            }
        };
        
        function getCurrentNode(treeId, treeNode) {
            curNode = treeNode;    
        }
        
        //点击左侧的菜单树，动态展示右侧
        function zTreeOnClick(){			
     	   $("#belognDepartmentId").val(curNode.id);
        	}

        //初始化树
        var t = $("#tree");
        t = $.fn.zTree.init(t, setting, treeData);
    }
	   
	   /*
       chkboxType: { “Y”: “ps”, “N”: “ps” } 
	   Y 属性定义 checkbox 被勾选后的情况； 
	   N 属性定义 checkbox 取消勾选后的情况； 
	   “p” 表示操作会影响父级节点； 
	   “s” 表示操作会影响子级节点。 
	   */
       //数据权限部门树
	   function ztreeData(treeData){
           var zTree;
           //用于保存用户选中的节点
           var curNode;
           //树属性的定义  
           var setting = {  
               check: { 
            	   enable: true,				
            	   chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
            	   chkboxType: { "Y": "s", "N": "s" }   //勾选 checkbox 对于父子节点的关联关系
               },	
               //页面上的显示效果  
               view: {
                   showLine: false,					
                   selectedMulti: false
               }, 
               data: {
                   simpleData: {
                       enable:true,
                       idKey: "id",
                       pIdKey: "pId",
                       rootPId: ""
                   },  
	               key: {  
	                   title: "title"  
	               } 
               },
               callback: {
                   beforeClick: getCurrentNode,
                   onClick : zTreeOnClick
               }
           };
           
           function getCurrentNode(treeId, treeNode) {
               curNode = treeNode;    
           }
           
           //点击左侧的菜单树，动态展示右侧
           function zTreeOnClick(){			
           	}

           //初始化树
           var t = $("#treeData");
           t = $.fn.zTree.init(t, setting, treeData);  
	   }
       
	   
	 //用户选中了所在部门的取消
    function cancel(){
     	/* var baseTreeSelect = getQueryString("baseTreeSelect");
			//设置树的选中状态
			setTreeNoteSelect("tree",baseTreeSelect); */
			$("#myModa4").modal("hide");
			$("#belognDepartmentId").val(null);
    }
	 
	 
    /* 选择部门确定 */
    function addDempentlike(){
     	 //用户选择的模块权限
     	   	var treeObj = $.fn.zTree.getZTreeObj("tree");
     	       nodes=treeObj.getCheckedNodes(true);
     	   	//拿到一组负责部门权限
     	   	var fzdepartment = "";
     	       for(var i=0;i<nodes.length;i++){  
     	       	if(i == 0){
     	       		fzdepartment += nodes[i].id; //获取选中节点的值  
     	       	}else{
     	       		fzdepartment += "," + nodes[i].id; //获取选中节点的值  
     	       	}
     	    } 
     	      departmentCode=fzdepartment;
     	    console.log("departmentIds---->"+departmentCode);
    	$("#myModa4").modal("hide");
    }
    /*页面跳转  */
    function messagestaff(id){
    	if(id != 1){
    		window.location.href="<%=path%>/view/ui/deletestaffList";
    	}else{
    		window.location.href="<%=path%>/view/ui/staffList";
    	}
    }
    
    /*复选框  */
    $("#checkall").on("click", function() {
    	if($(this).prop("checked") === true) {
            /* $("name=checkList").prop("checked", $(this).prop("checked")); */
            $('[name=checkList]:checkbox').prop('checked',this.checked);//checked为true时为默认显示的状态
            $('#example tbody tr').addClass('selected');
        } else {
            $(".checkbox_select").prop("checked", false);
            $('#example tbody tr').removeClass('selected');
        }
    });
    
	/* 初始化页面 */
    function init() {
        myDataTable = dataTable();
    }



  

    function func_dataTableReload() {
    	if(func_valid()){
	        myDataTable.ajax.reload();
    	}
    }

    function func_AjaxUrl() {
    	 return path + "/staff/ajaxstaffPagedeleteList"; 
    }

    function func_columns() {
        var jsonArr = [
        	{"data": "id"},
            {"data": "name","sDefaultContent" : "","sClass" : "center" },
            {"data": "historyScore","sClass" : "center"},
            {"data": "surplusScore","sClass" : "center"},
            {"data": "fansCount","sClass" : "center"},
            {"data": "memberCount","sClass" : "center"},
            {"data": "joinAemCount","sClass" : "center"},
            {"data": "focusTime","sClass" : "center"}
        ];
        return jsonArr;
    }

    function func_ajaxData() {
    	var jsonObject = new Object();
        if ($.trim($("#phone").val()) != "") {
            jsonObject.phone = $("#phone").val();
        }
        if($.trim($("#name").val()) != ""){
        	jsonObject.name = $.trim($("#name").val());
        }
        if($("a[point].cfoucs").attr("point") == ""){
        	if($("#point1").val() != ""){
	        	jsonObject.scoreStart = parseInt($("#point1").val())*100;
        	}
        	if($("#point2").val() != ""){
	        	jsonObject.scoreEnd = parseInt($("#point2").val())*100;
        	}
        }
         jsonObject.departmentCode = departmentCode; 
        
        return jsonObject;
    }

    function dataTable() {
        return $('#myTable').DataTable({
        	 /* processing: true, */
      		//ordering: false,
      		searching: false,
      		info: true,
      		autoWidth: true,
      		lengthChange: false,
      		"order": [[ 2, "desc" ]],
      	    language: {
      	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   <p>暂无点击数据</p></div>',
      	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
      			infoEmpty: '没有数据',
      			lengthMenu: '每页显示 _MENU_ 条记录',
      			loadingRecords: '正在加载数据....',
      			processing: '正在处理数据....',
      			zeroRecords: '没有找到匹配的记录',
      			paginate: {
      				first: '首页',
      				previous: '前页',
      				next: '后页',
      				last: '尾页'
      			}
      	    },
      	    order: [[2,'desc']],
      		pageLength: 20,
      	    pagingType: 'full_numbers',        	     
      	    columns: func_columns(),
 			columnDefs: [{
	    	　　　　'targets' : [0,1,2,3,4,5,6,7],    //除2.3两列外，都默认不排序
	    	　　　　'orderable' : false
	    	　　},{
      	    		render: function(data, type, full) {
      	    		 var result = "";
                      if (data != null) {
                          result = '<input class="checkbox_select" name="checkList" type="checkbox" value="'+data+'"/>';
                      }
                      return result;
             },
 			targets: 0
      		},{
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                    	 result='<img style="width:20px;float:left;margin-top:20px;" class="card_click" >' 
                             + '<img style="height:30px;width:30px;margin:0 0 0 6px;border-radius:50%;" onerror="loadDefalutImage(this)" src="'+full.headImg+'">&nbsp;&nbsp;'+data+'' 
                     }
                     return result;
                 },
                 targets: [1]
             }, {
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                         result = data;
                     }
                     return result;
                 },
                 targets: [2],
             }, {
                 render: function (data, type, full) {
                     var result = "";
                      if (data == null) {
                          result = "——";
                      } else {
                          result = data;
                      }
                     return result;
                 },
                 targets: [3],
             }, {
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                         result = data;
                     }
                     return result;
                 },
                 targets: [4],
             }, {
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                         result = data;
                     }
                     return result;
                 },
                 targets: [5],
             }, {
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                         result = data+"/"+full.aemCount;
                     }
                     return result;
                 },
                 targets: [6],
             }, {
                 render: function (data, type, full) {
                     var result = "";
                     if (data == null) {
                         result = "——";
                     } else {
                    	 result = ""+formatDateTimeYMDHMS(data)
                     }
                     return result;
                 },
                 targets: [7]
             }],
      	    serverSide: true,
      	    ajax: {
      	    	contentType: 'application/json',
      	    	type: 'POST',
      	    	url: func_AjaxUrl(),
      	    	data: function(d){
      				d.extra_search = func_ajaxData();
      				return JSON.stringify(d);
      	    	}	
      	    }
        });
    }

	//验证
	function func_valid(){
		var point1 = $("#point1").val();
		var point2 = $("#point2").val();
		if($("a[point]:last").hasClass("cfoucs") && point1!='' && point2!=''){
			point1 = parseInt(point1);
			point2 = parseInt(point2);
			if(point1 > point2){
				var d = dialog({
					align: 'right',
					content: '第二个值应比第一个值大'
				}).show($("#point2")[0]);
				setTimeout(function () {
					d.close().remove();
				}, 1600);
				return false;
			}
		}
		
		return true;
	}
	
	
	
</script>
</html>